<style scoped>

.extendGroup {
  float: right;
  margin-right: 20px;
  opacity: 0;
}

.el-tree-node__content:hover .extendGroup {
  opacity: 1;
}

</style>

<template>
  <div v-loading="loading">
    <!-- 操作 -->
   <div class="group_title">
     关联分组
   </div>
  <!--   <div class="operation">
      <el-button size="small" type="primary" v-has="[role.request]" @click="fetchData">查询</el-button>
      <el-button size="small" type="danger" v-has="[role.remove]">删除</el-button>
      <el-button size="small" v-if="$_has([role.request]) && canReset">重置</el-button>
      <el-button size="small" type="info" @click="requestNotAllowed">尝试发起越权请求</el-button>

    </div> -->
    <!-- table start  -->
    <el-table ref='multipleTable' :data="list" border style="width: 100%;"  @selection-change="selsChange" >
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="groupName" width="150" label="用户名称">
      </el-table-column>
   
      <el-table-column prop="groupDesc" label="用户组描述">
      
      </el-table-column>

     
    </el-table>
    <!-- table end  -->
    <!--工具条-->
    <el-col :span="24" class="toolbar toolbar_footer">
      <el-button type="primary" v-if="isReleGroup" @click="batchRemove" :disabled="this.sels.length===0">保存</el-button>
      <!-- <el-pagination v-if="total" layout="prev, pager, next,total,jumper" @current-change="handleCurrentChange" :page-size="showCount" :total="total" style="float:right;">
      </el-pagination> -->
    </el-col>
  </div>
</template>

<script>
import * as usergroup from '../api/usergroup';


let myMixin = {
  data: function() {
    return { usergroup }
  }
}

export default {
  mixins: [myMixin],
  data() {
    return {
      isReleGroup:true,
      filters:{name:''},//搜索表单
     
      sels: [],//列表选中列

      list: [],
      roleIdSelect:[],
      roleArr:[],
      canReset: true,
      loading: false,
      userId:'',
      roleId:'',
      paramId:'',
    }
  },
  methods: {
     checked(index){
      //首先el-table添加ref="table"引用标识
      this.$refs.multipleTable.toggleRowSelection(this.list[index],true);
    },
   selectCheck(){
      let index=0;

      if(this.roleIdSelect!=undefined&&this.roleIdSelect!="undefined"&&this.roleIdSelect!=''){

         this.roleIdSelect.map(x=>{

           for(var i=0;i<this.roleArr.length;i++){
             if(this.roleArr[i]==x){
               this.checked(i);//每次更新了数据，触发这个函数即可。
             }
           }

         })
      }   

    },
    selsChange: function (sels) {//多选框
      this.sels = sels;
    },
    batchRemove: function () {//批量保存
      var ids = this.sels.map(item => item.groupId).toString();
      let para={};
      if(this.userId!=undefined&&this.userId!="undefined"&&this.userId!=""){
        para = {
            userId:this.userId,
            groupIdList:ids
          };

          usergroup.releGroup.r(para).then((res) => {
          if(res.data.retCode==1){
            //关联组成功
            this.addFormVisible = false;
            this.$message("关联组成功");
            // this.$parent.routerPath="users";
            this.$parent.fetchData();

            this.$router.push(this.$parent.$route.matched[2].path);
            // this.$parent.$route.path
            // this.fetchData();
          }else{
            this.$message(res.data.retMsg);
          }
          
        });
      }else if(this.roleId!=undefined&&this.roleId!="undefined"&&this.roleId!=""){
        para = {
            roleId:this.roleId,
            groupIdList:ids
        };

        usergroup.releGroupRole.r(para).then((res) => {
        if(res.data.retCode==1){
          //关联组成功
          this.addFormVisible = false;
          this.$message("关联组成功");
          // this.$parent.routerPath="users";
          this.$parent.fetchData();

          this.$router.push(this.$parent.$route.matched[2].path);
          // this.$parent.$route.path
          // this.fetchData();
        }else{
          this.$message(res.data.retMsg);
        }
        
      });
      }

        
    },
    getUsers(){
      //获取用户信息
      let para = {
          userId:this.userId
        };
      usergroup.userinfo.r(para).then((res) => {
        if(res.data.retCode==1){

        }else{
          this.$message(res.data.retMsg);
        }
      })
    },
 
    fetchData(init) {
      let para = {
        /*  showCount:this.showCount,
          currentPage:this.page,//当前查询页*/
          keyword:this.filters.name
        };
      usergroup.request.r().then((res) => {
        if(res.data.retCode==1){
          this.total=res.data.data.totalRow;
          this.list = res.data.data;
          this.list.map(x=>{
              this.roleArr.push(x.groupId);            
            })
          this.fetchDataList();
        }else{
          this.$message(res.data.retMsg);

        }
       
        this.loading = false;
      })
    },
    fetchDataList() {
      let para = {
          userId:this.userId,
          roleId:this.roleId
        };
      usergroup.request.r(para).then((res) => {
        if(res.data.retCode==1){
          res.data.data.map(x=>{
            this.roleIdSelect.push(x.groupId);
          })
        this.selectCheck();

        }else{
          this.$message(res.data.retMsg);

        }
       

        this.loading = false;
      })
    },
    requestNotAllowed: function(){
      usergroup.notAllowed.r();
    }
  },
  created() {
    this.userId=this.$route.query.id;
    this.roleId=this.$route.query.roleId;
     if(this.userId!=undefined && this.userId!="undefined" && this.userId!=""){
        this.isReleGroup=this.$_has([usergroup.releGroup]);

    }else if(this.roleId!=undefined && this.roleId!="undefined" && this.roleId!=""){
       this.isReleGroup=this.$_has([usergroup.releGroupRole]);
    }
    this.fetchData(true)

    // this.getUsers();
  }
}
</script>